<template>
<el-row class="tac" style="height: 100%;background-color:rgb(84, 92, 100)">
    <el-col :span="24">
        <el-menu default-active="DataScreen" :default-openeds='["xzqstatistics"]' class="el-menu-vertical-demo" router unique-opened @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-submenu v-for="item in menu" :index="item.id" :key="item.id">
                <template slot="title">
                    <icon :name="item.icon"></icon>
                    <span v-text="item.name"></span>
                </template>
                <el-menu-item-group class="over-hide" v-for="sub in item.sub" :key="sub.componentName">
                    <el-menu-item :index="sub.componentName" v-text="sub.name">
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-col>
</el-row>
</template>

<style scoped>
.over-hide {
    overflow: hidden;

}
</style>

<script>
import menu from '@/config/menu-config'

export default {
    data() {
        return {
            menu: menu
        }
    },

    methods: {
        handleOpen(key, keyPath) {},
        handleClose(key, keyPath) {}
    }
}
</script>
<style scoped>

</style>
